<template>
    <div class="detail">
        <div style="height: 88px;"></div>
        <Header></Header>
        <div class="detail-box">
            <!-- 商品信息 -->
            <div class="productMessage">
                <!-- 左边图片部分 -->
                <div class="message-left">
                    <div class="productBigImg" v-if="dataForm.images">
                        <img :src="dataForm.images[imgIndex]" alt="">
                    </div>
                    <div class="productimgs">
                        <div v-for="(item, index) in dataForm.images" @click="selectimg(index)">
                            <img :src="item" alt="">
                        </div>
                    </div>
                    <p>{{ dataForm.remark }}</p>

                </div>


                <!-- 右边信息选择部分 -->
                <div class="message-right">
                    <!-- 商品信息 -->
                    <div class="productdetail">
                        <p class="name">{{ dataForm.name }}</p>
                        <p class="price">￥{{ dataForm.price }}</p>
                    </div>
                    <!-- 选择商品信息部分 -->
                    <div class="productselect">
                        <el-form ref="formData" :model="formData" :rules="formDatarange" label-width="180px">
                            <el-row :gutter="24">
                                <el-col :span="12">

                                    <el-form-item :label="$t('assemble.授权区域')" prop="userarea">
                                        <el-select v-model="formData.userarea" filterable :placeholder="$t('assemble.请选择')"
                                            @change="handlearealist">
                                            <el-option v-for="item in this.dataForm.standby" :key="item.id"
                                                :label="item.name" :value="item.name" @click="handlearealist(item.id)">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>


                                    <el-form-item :label="$t('assemble.授权品牌')" prop="authorizedbrand">
                                        <el-select v-model="formData.authorizedbrand" filterable
                                            :placeholder="$t('assemble.请选择')" @change="handlebrand">
                                            <el-option v-for="item in this.dataForm.brand" :key="item.id"
                                                :label="item.nickname" :value="item.nickname" @click="handlebrand(item.id)">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>


                                    <el-form-item :label="$t('assemble.授权产品子类别')" prop="sonauthorizedbrand">
                                        <el-input :placeholder="$t('assemble.请输入')"
                                            v-model="formData.sonauthorizedbrand"></el-input>
                                    </el-form-item>


                                    <!-- <el-form-item v-if="formData.product" label="产品" prop="product">
                                        <el-select v-model="formData.product" placeholder="请选择" @change="handleproduct">
                                            <el-option v-for="item in this.dataForm.product" :key="item.id"
                                                :label="item.nickname" :value="item.nickname">
                                            </el-option>
                                        </el-select>
                                    </el-form-item> -->
                                    <!-- <el-form-item v-if="dataForm.standby" label="备用">
                                        <el-select v-model="formData.standby" placeholder="请选择">
                                            <el-option v-for="item in dataForm.standby" :key="item.id" :label="item.nickname"
                                                :value="item.nickname">
                                            </el-option>
                                        </el-select>
                                    </el-form-item> -->

                                </el-col>
                                <el-col :span="12">

                                    <el-form-item :label="$t('assemble.授权渠道')" prop="bazaar">
                                        <el-select v-model="formData.bazaar" filterable :placeholder="$t('assemble.请选择')">
                                            <el-option v-for="item in bazaarlist" :key="item.id" :label="item.name"
                                                :value="item.name" @click="handlebazaarlist(item.id)">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item :label="$t('assemble.授权产品类别')" prop="category">
                                        <el-select v-model="formData.category" filterable :placeholder="$t('assemble.请选择')">
                                            <el-option v-for="item in this.dataForm.category" :key="item.id"
                                                :label="item.nickname" :value="item.nickname">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item v-if="formData.productdescribe" :label="$t('assemble.产品描述')"
                                        prop="productdesc">
                                        <el-select v-model="formData.productdesc" filterable
                                            :placeholder="$t('assemble.请选择')">
                                            <el-option v-for="item in productdescribe" :label="item.nickname"
                                                :value="item.nickname">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-col>

                            </el-row>

                        </el-form>
                        <!-- <div class="selectbox"> -->
                        <!-- <div>
                                <span class="lable">授权渠道</span>
                                <el-select v-model="formData.bazaar" placeholder="请选择">
                                    <el-option v-for="item in bazaarlist" :key="item.id" :label="item.bazaar"
                                        :value="item.bazaar" @click="handlebazaarlist(item.id)">
                                    </el-option>
                                </el-select>
                            </div> -->
                        <!-- <div>
                                <span class="lable">产品类别</span>
                                <el-select v-model="formData.category" placeholder="请选择">
                                    <el-option v-for="item in this.dataForm.category" :key="item.id" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="selectbox">
                            <div>
                                <span class="lable">授权品牌</span>
                                <el-select v-model="formData.authorizedbrand" placeholder="请选择" @change="handlebrand">
                                    <el-option v-for="item in this.dataForm.brand" :key="item.id" :label="item.name"
                                        :value="item.name" @click="handlebrand(item.id)">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="" style="display: flex;">
                                <span class="lable">授权品牌子类别</span>
                                <el-input placeholder="请输入授权品牌子类别" v-model="formData.sonauthorizedbrand"></el-input> -->

                        <!-- <el-select v-model="formData.sonauthorizedbrand" filterable placeholder="请选择">
                                    <el-option v-for="item in sonauthorizedbrandlist" :key="item.id" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select> -->
                        <!-- </div>
                        </div>
                        <div class="selectbox" v-if="formData.product && formData.productdesclist">
                            <div v-if="formData.product">
                                <span class="lable">产品</span>
                                <el-select v-model="formData.product" placeholder="请选择" @change="handleproduct">
                                    <el-option v-for="item in this.dataForm.product" :key="item.id" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-if="formData.productdesclist">
                                <span class="lable">产品描述</span>
                                <el-select v-model="formData.productdesc" filterable placeholder="请选择">
                                    <el-option v-for="item in productdesclist" :key="item.id" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="selectbox" v-if="dataForm.standby">
                            <div>
                                <span class="lable">备用</span>
                                <el-select v-model="formData.standby" placeholder="请选择">
                                    <el-option v-for="item in dataForm.standby" :key="item.id" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </div>
                        </div> -->
                        <div class="selectbox">
                            <div class="shuliang">
                                <div class="lable">{{ $t('assemble.数量') }}</div>
                                <div class="contorlnum">
                                    <div class="jian fuhao" @click="handlejianNum(dataForm.min_num)">-</div>
                                    <div class="num">
                                        <!-- {{ formData.num }} -->
                                        <el-input v-model="formData.num" style="width: 220px;"></el-input>
                                    </div>
                                    <div class="jia fuhao" @click="handleaddNum(dataForm.min_num)">+</div>
                                </div>
                                <div class="zhu">{{ $t('assemble.注') }}：{{ dataForm.min_num
                                }}{{ " " }}{{ $t('assemble.起订') }}，{{ $t('assemble.每次数量加减以') }} {{ " " }} {{
    dataForm.min_num
}}{{ " " }}{{ $t('assemble.为单位') }}</div>

                            </div>
                        </div>

                    </div>

                    <div v-if="$i18n.locale == 'en'" class="btn" @click="gotoBalance('formData')" style="margin-top: 40px;">
                        {{ $t('assemble.立即下单') }}</div>
                    <div v-if="$i18n.locale == 'zh'" class="btn" @click="gotoBalance('formData')">{{ $t('assemble.立即下单') }}
                    </div>


                </div>
            </div>

            <div class="heng"></div>
            <!-- 商品详情 -->
            <div class="productDetail">
                <p class="title">{{ $t('assemble.商品详情') }}</p>
                <div class="detailimgbox">
                    <!-- <img src="../../static/imgs/detailimg.png" alt=""> -->
                    <div v-html="dataForm.detail"></div>
                </div>
                <div class="detailtext">

                </div>

            </div>
        </div>

        <div style="height: 184px;"></div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import { prodetail, userArea } from '../../utils/api'
import { orderBy, ConvertPinyin } from "../../utils/pinyin"


export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            imgIndex: 0,
            formData: {
                bazaar: '',//市场许可
                category: '',//产品类别
                authorizedbrand: '',//授权品牌
                sonauthorizedbrand: '',//授权品牌子类别
                product: '',//产品
                productdesc: '',//产品描述
                standby: '',//备用
                num: 500,
                userarea: "",//授权区域名字
                user_area_id: "",//授权区域id
            },//存id
            formdataText: {},
            productIndex: 0,
            bazaarlist: [],//市场许可选择列表
            categorylist: [],//产品类别选择列表
            authorizedbrandlist: [],//授权品牌选择列表
            sonauthorizedbrandlist: [],//授权品牌子类别选择列表
            productlist: [],//产品选择列表
            productdesclist: [],//产品描述选择列表
            standbylist: [],//备用选择列表
            dataForm: {},
            formDatarange: {
                bazaar: [
                    { required: true, message: '请选择授权渠道', trigger: 'change' },
                ],
                category: [
                    { required: true, message: '请选择授权产品类别', trigger: 'change' },
                ],
                authorizedbrand: [
                    { required: true, message: '请选择授权品牌', trigger: 'change' },
                ],
                sonauthorizedbrand: [
                    { required: true, message: '请输入授权产品子类别', trigger: 'blur' },

                ],
                userarea: [
                    { required: true, message: '请选择授权区域', trigger: 'change' },

                ],
                // product: [
                //     { required: true, message: '请选择产品', trigger: 'change' },

                // ], 
                // productdesc: [
                //     { required: true, message: '请选择产品描述', trigger: 'change' },

                // ], 
                // standby: [
                //     { required: true, message: '请输入备用', trigger: 'blur' },

                // ]
            },
            areaList: []
        }
    },
    mounted() {

        // console.log('商品详情', this.$route.query.id)
        this.getprodetail(this.$route.query.id)
        this.handleGetuserArea()
        if (localStorage.getItem('ReorderData')) {
            let ReorderData = JSON.parse(localStorage.getItem('ReorderData'))
            this.formData.userarea = ReorderData.user_area_id
            this.formData.bazaar = ReorderData.bazaar
            this.formData.authorizedbrand = ReorderData.brand.split(',')[0]
            this.formData.category = ReorderData.category
            this.formData.sonauthorizedbrand = ReorderData.brand.split(',')[1]
            this.formData.num = ReorderData.num.replace(/[^\d\.-]/g, "")
        }

        //侧边滑块每次进入都在顶部
        window.scrollTo(0, 0)

    },
    methods: {
        async getprodetail(id) {
            let res = await prodetail({ id })
            console.log("商品详情", res)
            if (res.code == 1) {
                this.dataForm = res.data
                if (!localStorage.getItem('ReorderData')) {
                    this.formData.num = this.dataForm.min_num
                }
                // console.log( this.dataForm.detail ,'888888888888888');
                this.dataForm.images = this.dataForm.images.split(',')
                this.bazaarlist = res.data.bazaar
                // console.log("this.dataform", this.dataForm.detail)

                // this.dataForm.brand.forEach(f => {
                //     f.pinyin = ConvertPinyin(f.nickname);
                // })

                // this.dataForm.brand = orderBy(this.dataForm.brand, "pinyin")

                // this.dataForm.category.forEach(f => {
                //     f.pinyin = ConvertPinyin(f.nickname);
                // })
                // this.dataForm.category = orderBy(this.dataForm.category, "pinyin")
            }

        },
        //获取授权区域
        async handleGetuserArea() {
            let res = await userArea()
            console.log("授权区域", res)
            this.areaList = res.data
        },
        selectimg(index) {
            this.imgIndex = index
        },
        //选择授权渠道
        handlebazaarlist(val) {
            this.bazaarlist.forEach((item, index) => {
                if (item.id == val) {
                    this.formdataText.bazaartext = item.name
                }
            })
        },

        //选择授权区域
        handlearealist(value) {
            console.log("222222", value)
            this.areaList.forEach((item, index) => {
                if (item.name == value) {
                    this.formData.user_area_id = item.id
                }
            })
            console.log("srewid", value, this.formData.user_area_id)

        },


        handlebrand(val) {
            console.log("授权", val)
            // this.formData.sonauthorizedbrand = ""
            this.dataForm.brand.forEach((item, index) => {
                if (item.name == val) {
                    this.sonauthorizedbrandlist = item.children
                }
            });
        },
        handleproduct(val) {
            console.log("val", val)
            this.formData.productdesc = ""
            this.dataForm.product.forEach((item, index) => {
                if (item.name == val) {
                    this.productdesclist = item.children
                }
            });

        },
        handlejianNum(val) {
            console.log("Val", val)
            if (parseInt(this.formData.num) == parseInt(val) || (parseInt(this.formData.num) - parseInt(val)) < parseInt(val)) {
                this.formData.num = val
                this.$message({
                    message: `${this.$t('assemble.订单')}${val}${this.$t('assemble.起订')}`,
                    type: 'warning'
                });
            } else {
                this.formData.num -= val
            }
        },
        handleaddNum(val) {
            this.formData.num = parseInt(this.formData.num)
            val = parseInt(val)
            this.formData.num += val
            console.log("111", this.dataForm.min_num)
        },
        gotoBalance(formName) {
            // console.log("valid",formName) 
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.formData.num % this.dataForm.min_num != 0) {
                        console.log("5555555")
                        this.$message({
                            message: `订单要以${this.dataForm.min_num}为单位`,
                            type: 'warning'
                        });
                    } else {
                        this.formData.product_id = this.dataForm.id
                        this.$router.push({ path: '/home/balance', query: { data: this.formData, product: this.dataForm } })
                        sessionStorage.setItem("data", JSON.stringify(this.formData))
                        sessionStorage.setItem("product", JSON.stringify(this.dataForm))
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });



        },
    },
}
</script>
<style scoped lang="scss">
.detail {
    display: flex;
    flex-direction: column;
    align-items: center;

    .detail-box {
        width: 1200px;

        .productMessage {
            display: flex;
            justify-content: space-between;

            .message-left {
                width: 440px;
                align-items: center;

                .productBigImg {
                    width: 400px;
                    height: 400px;

                    // line-height: 440px;
                    img {
                        width: 80%;
                        // height: 100%;
                        border-radius: 10px 10px 10px 10px;
                    }
                }

                .productimgs {
                    margin-top: 20px;
                    display: flex;

                    img {
                        width: 80px;
                        // height: 80px;
                        border-radius: 2px 2px 2px 2px;
                        opacity: 1;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }

                p {
                    font-size: 14px;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #B1B1B1;
                    line-height: 17px;
                    margin-top: 20px;
                }
            }

            .message-right {
                width: 740px;

                .productdetail {
                    .name {
                        font-size: 17px;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 21px;
                    }

                    .price {
                        font-size: 16px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 350;
                        color: #E00000;
                        line-height: 19px;
                    }

                }

                .productselect {
                    margin-top: 20px;
                    width: 700px;
                    height: 250px;

                    .selectbox {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 20px;

                        .shuliang {
                            display: flex;
                            align-items: center;
                        }

                        .lable {
                            width: 150px;
                            height: 17px;
                            font-size: 15px;
                            font-family: PingFang SC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 13px;
                            display: inline-block;
                            text-align: right;
                            padding-right: 8px;
                            box-sizing: border-box;
                            margin-left: 30px;
                        }

                        .zhu {
                            font-size: 13px;
                            font-family: PingFang SC-Medium, PingFang SC;
                            font-weight: 400;
                            color: #B1B1B1;
                            line-height: 15px;
                            margin-left: 10px;
                        }

                        .contorlnum {
                            width: 202px;
                            height: 42px;
                            border-radius: 10px 10px 10px 10px;
                            opacity: 1;
                            border: 1px solid #B1B1B1;
                            display: flex;
                            font-size: 20px;
                            font-family: PingFang SC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;



                            .fuhao {
                                width: 53px;
                                text-align: center;
                                line-height: 42px;
                                cursor: pointer;
                            }

                            .num {
                                width: 96px;
                                height: 42px;
                                border-radius: 0px 0px 0px 0px;
                                opacity: 1;
                                border-left: 1px solid #B1B1B1;
                                border-right: 1px solid #B1B1B1;
                                cursor: pointer;
                                text-align: center;
                                overflow: hidden;
                                text-align: center;
                                line-height: 42px;

                            }
                        }
                    }
                }

                .btn {
                    width: 220px;
                    height: 45px;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    border: 1px solid #E00000;
                    font-size: 16px;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #E00000;
                    line-height: 45px;
                    text-align: center;
                    // margin-top: 30px;
                    cursor: pointer;
                    margin-left: 250px;
                    // margin-top: 30px;
                }
            }
        }

        .heng {
            width: 1200px;
            height: 1px;
            opacity: 1;
            background-color: #EDEDED;
        }

        .productDetail {
            .title {
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 19px;
            }

            .detailimgbox {
                width: 1200px;
                height: 400px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .detailtext {}
        }

    }
}

::v-deep .el-form-item__label {
    font-size: 15px;
    // width: 265px !important;
}
</style>

<style>
.num .el-input__inner {
    /* height: 55px !important; */
    border: none;
}
</style>